<template>
  <div class="register-container">
    <el-form :model="registerForm" label-position="top" status-icon :rules="rules" ref="registerForm" label-width="100px" class="demo-ruleForm" size="mini">
      <el-form-item label="用户名" prop="username">
        <el-input v-model.number="registerForm.username"></el-input>
      </el-form-item>
      <el-form-item prop="email" label="邮箱">
        <el-input v-model="registerForm.email" type="email"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="registerForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="用户头像上传" prop="avatar">
        <el-upload
          class="upload-demo"
          action="http://127.0.0.1:3000/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
          :limit="fileLimit"
          :on-exceed="handleExceed"
          :on-success="handleScuess"
          v-model="registerForm.avatar"
          :before-upload="beforeUpload"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="regSubmit('registerForm')" plain>注册</el-button>
        <el-button @click="resetForm('registerForm')" plain>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data () {
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      }
      setTimeout(() => {
        callback()
      }, 1000)
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.registerForm.checkPass !== '') {
          this.$refs.registerForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var checkEmail = (rule, value, callback) => {
      //       :rules="[
      //   { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
      // ]"
      if (value === '') {
        callback(new Error('请输入邮箱'))
      } else {
        callback()
      }
    }
    return {
      registerForm: {
        username: '',
        password: '',
        checkPass: '',
        email: '',
        avatar: []
      },
      rules: {
        password: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        username: [{ validator: checkUsername, trigger: 'blur' }],
        email: [{ validator: checkEmail, trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]
      },
      fileList: [],
      fileLimit: 1
    }
  },
  methods: {
    async regSubmit () {
      // console.log(this.registerForm)
      const res = await this.$api.registerUser(this.registerForm)
      if (res.data.err_code === 0) {
        this.$notify({
          title: '成功',
          message: '注册成功',
          type: 'success'
        })
        setTimeout(() => {
          this.share()
        }, 1000)
      }
      console.log(res)
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 移除上传文件
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview (file) {
      // console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    // 上传成功提示
    handleScuess (response, file, fileList) {
      console.log(file)
      // this.registerForm.avatar = response.imgSrc[0].path
      this.registerForm.avatar = file.url

      // console.log(this.registerForm)80
    },
    beforeUpload (file) {
      // console.log(file)
    },
    share () {
      const activeName = 'first'
      this.$emit('shareActiveName', activeName)
    }
  }
}
</script>

<style lang="less" scoped></style>
